<!--
  MessageBox 全局API使用说明：

  1. 普通信息提示：
     this.$messageBox.info('这是一条普通提示信息')

  2. 罪犯投送信息提示：
     this.$messageBox.transfer({
       source: '蚌埠市看守所',
       target: '潜川监狱第三监区',
       count: '165名罪犯'
     })

  3. Toast提示：
     this.$messageBox.toast({
       title: '提示标题',
       message: '提示内容',
       position: 'top-right', // top-right, top-left, bottom-right, bottom-left
       autoHide: true, // 是否自动隐藏
       hideDelay: 3000 // 自动隐藏延迟（毫秒）
     })

  4. 性别分布Toast（专用）：
     this.$messageBox.showGenderToast({
       male: '49663',
       female: '5461',
       minorMale: '414',
       minorFemale: '27'
     })

  5. 自定义弹窗：
     this.$messageBox.show({
       title: '自定义标题',
       message: '自定义消息内容',
       type: 'info', // info, transfer, toast
       data: { ... }, // 数据对象
       confirmText: '确定',
       onConfirm: () => { ... },
       onCancel: () => { ... }
     })
-->
<template>
  <div id="app">

    <!-- 页面内容 -->
    <main class="main-content">
      <router-view />
    </main>

    <!-- 全局加载状态 -->
    <div v-if="isLoading" class="global-loading">
      <div class="loading-spinner"></div>
    </div>

    <!-- 全局错误提示 -->
    <div v-if="hasError" class="global-error">
      <div class="error-content">
        <p>{{ errorMessage }}</p>
        <button @click="clearError" class="error-close">×</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      navItems: [
        { path: '/', name: '首页' },
        { path: '/dashboard', name: '数据大屏' },
        { path: '/about', name: '关于' }
      ]
    }
  },
  computed: {
    // 全局状态
    isLoading() {
      return this.$store.getters.isLoading
    },
    hasError() {
      return this.$store.getters.hasError
    },
    errorMessage() {
      return this.$store.state.error
    },
    currentTheme() {
      return this.$store.getters['ui/currentTheme'].name
    },
    showNavbar() {
      // 在某些页面可能不需要显示导航栏
      return true
    }
  },
  mounted() {
    // 应用初始化
    this.$store.dispatch('initializeApp')

    // 初始化UI状态
    this.$store.dispatch('ui/initializeUI')

    // 监听窗口大小变化
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    // 切换主题
    toggleTheme() {
      const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark'
      this.$store.dispatch('ui/setTheme', { name: newTheme })
    },

    // 清除错误
    clearError() {
      this.$store.dispatch('clearError')
    },

    // 处理窗口大小变化
    handleResize() {
      this.$store.dispatch('ui/updateScreenSize', window.innerWidth)
    }
  }
}
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  background: #0a0a0a;
  color: white;
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.nav-brand .brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #00ffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-brand .brand-link:hover {
  color: #ff00ff;
}

.brand-icon {
  font-size: 1.5rem;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-item {
  color: #b0b0b0;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover,
.nav-item.active {
  color: #00ffff;
  background: rgba(0, 255, 255, 0.1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #00ffff;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  /* margin-top: 60px; */
}

/* 全局加载状态 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #00ffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 全局错误提示 */
.global-error {
  position: fixed;
  top: 80px;
  right: 20px;
  max-width: 400px;
  z-index: 1000;
}

.error-content {
  background: #ff4444;
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.error-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  margin-left: 15px;
  opacity: 0.8;
}

.error-close:hover {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 15px;
    height: 50px;
  }

  .nav-brand .brand-link {
    font-size: 1rem;
  }

  .nav-menu {
    gap: 15px;
  }

  .nav-item {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .main-content {
    margin-top: 50px;
  }

  .global-error {
    left: 10px;
    right: 10px;
    top: 60px;
  }

  .error-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .error-close {
    margin-left: 0;
    align-self: flex-end;
  }
}
</style>
